<!--
- Author:  LiShibin.
- Date:    2017/7/11 0011.
- File:    list.
-->
<template>
  <div>
    <div class="Web_Box">
      <div class="DistributionOrder">
        <div class="ProList pt10">
          <ul>
            <li v-for="order in orderListByGoods">
              <div class="tit"><span class="fl">单号：{{order.refund_sn}}</span>
                <span class="fr cr_595757">{{order.seller_state | refundStatusName}}</span></div>
              <div style="margin-bottom: 10px;" class="f-cb" v-for="goods in order.extend_goods_info">
                <div class="Pic">
                  <img :src="$config.website + $config.goodsImgSrc + goods.goods_image" alt="" @click="gotoRefundDetail(order.refund_id)"/>
                </div>
                <div class="Con" @click="gotoRefundDetail(order.refund_id)">
                  <div class="">
                    <h2 class="slh2">{{goods.goods_name}}</h2>
                    <!--<p class="Attributes slh mb10"></p>-->
                    <p class="Attribute slh mb10"><span v-for="attr in goods.goods_spec">{{attr.name}} </span></p>
                  </div>
                  <div class=""><span class="Prices">￥{{goods.goods_price}}</span>
                    <span class="Num fr">×{{goods.goods_num}}</span></div>
                </div>
              </div>
              <div class="Operation">
                <p class="Total tr"><span style="float: left; color: #898989; font-size: 12px; line-height: 20px">{{order.add_time | timestampToDate}}</span>共{{order.extend_goods_info ? order.extend_goods_info.length : 0}}件商品  合计：￥{{order.refund_amount}}</p>
                <!--<div class="fr">-->
                  <!--<span class="but1 cr_595757 fr ml20" v-show="order.order_state == $dictionary.orderStatus.sended">查看物流 </span>-->
                <!--</div>-->
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <empty-data :show="orderList.requested && orderListByGoods.length <= 0"></empty-data>
    <footer-tab></footer-tab>
  </div>
</template>

<script>
  import * as dictionary from '../../../dictionary'
  export default{
    data() {
      return {
        orderId: this.$route.params.orderId,
        goodsId: this.$route.params.goodsId,
        orderList: {requested: false, data: []}
      }
    },
    components: {},
    created() {
      this.getRefundGoodsList(this.orderId)
    },
    computed: {
      orderListByGoods: function () {
        let list = []
        for (let i = 0; i < this.orderList.data.length; i++) {
          if (this.orderList.data[i].goods_id == this.goodsId) {
            list.push(this.orderList.data[i])
          }
        }
        return list
      }
    },
    filters: {
      refundStatusName: function (value) {
        let name = ''
        switch (value) {
          case dictionary.refundStatus.waiting:
            name = '等待审核'
            break
          case dictionary.refundStatus.resolve:
            name = '卖家已同意'
            break
          case dictionary.refundStatus.reject:
            name = '卖家已拒绝'
            break
        }
        return name
      }
    },
    methods: {
      gotoRefundDetail(id) {
        this.$router.push({name: 'refund-goods-detail', params: {id: id}})
      },
      getRefundGoodsList(orderId) {
        this.$request.getRefundGoodsListByOrder(orderId).then(data => {
          this.orderList.data = data
        }).finally(() => {
          this.orderList.requested = true
        })
      }
    }
  }
</script>

<style>

</style>